<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Toyqo - Kids Store Bootstrap 5 Template</title>

    <!-- Favicons -->
    <link rel="shortcut icon" href="assets/images/Shop.ico">
    <style>
        tr > td > h5 {
            font-weight: bold;
            margin-left: 100px;
            font-size: 20px;
        }
    </style>
    <!-- Vendor CSS (Icon Font) -->

    <!--
<link rel="stylesheet" href="assets/css/vendor/fontawesome.min.css" />
<link rel="stylesheet" href="assets/css/vendor/pe-icon-7-stroke.min.css" />
-->


    <!-- Plugins CSS (All Plugins Files) -->


    <!--
<link rel="stylesheet" href="assets/css/plugins/swiper-bundle.min.css" />
<link rel="stylesheet" href="assets/css/plugins/animate.min.css" />
<link rel="stylesheet" href="assets/css/plugins/lightgallery.min.css" />
<link rel="stylesheet" href="assets/css/plugins/aos.min.css" />
<link rel="stylesheet" href="assets/css/plugins/nice-select.min.css" />
-->


    <!-- Main Style CSS -->
    <!-- <link rel="stylesheet" href="assets/css/style.css" /> -->


    <!-- Use the minified version files listed below for better performance and remove the files listed above -->


    <link rel="stylesheet" href="assets/css/vendor/vendor.min.css">
    <link rel="stylesheet" href="assets/css/plugins/plugins.min.css">
    <link rel="stylesheet" href="assets/css/style.min.css">

    <style>
        .sectime > div {
            /*width: 200px;*/
            float: left;
        }

        .sectime {
            position: relative;
            height: 80px;
        }

        .sectime-1 > div {
            float: left;
            /*position: relative;*/
            /*display: inline-block;*/
        }

        .sectime-1 > div:first-child {
            border-left: solid 80px white;
            border-bottom: solid 80px rgb(0, 196, 204);
            border-right: solid 0px transparent;
            border-top: solid 0px transparent;
        }

        .sectime-1 > div:last-child {
            border-left: solid 80px rgb(0, 196, 204);
            border-bottom: solid 80px white;
            border-right: solid 0px transparent;
            border-top: solid 0px transparent;
        }

        .sectime-2 > div {
            float: left;
            padding: 20px 10px;
            height: 40px;
            font-size: 18px;
        }

        .sectime-2 > div:last-child > span {
            display: block;
            width: 100px;
            padding: 0px 12px;
            border-radius: 20px;
            font-size: 18px;
            border: 1px solid rgba(0, 0, 0, 0.5);
        }

        .sectime-2 > div:first-child span:hover {
            color: red;
        }
    </style>

</head>
<body>
<!--//导航栏-->
<div th:replace="header::headerS"></div>
<!-- Header Section Start -->
<div class="header section">
    <!-- 为你推荐 -->
    <h1 style="text-align: center; font-weight: bold">华信秒杀</h1>
    <br>
    <div class="container">
        <div class="sectime" style="position: relative;">
            <div class="sectime-1" style="background-color: rgb(0,196,204);margin-left: 80px;width: 360px">
                <div></div>
                <div style="background-color: rgb(0,196,204);width: 200px;height: 80px;">
                    <span id="cursec"
                          style="display:inline-block;float: left;font-size: 24px;font-weight:bold;color:white;padding-top: 20px;width: 38%">10:00</span>
                    <span style="display: inline-block;height: 100%;text-align:center;color: white;padding-top: 10px;width: 62%">
                        <div id="secover">已结束</div>
                        <div id="secovertime">距结束
                            <span id="csech">00</span> :
                            <span id="csecm">00</span> :
                            <span id="csecs">00</span>
                        </div>
                    </span>
                </div>
                <div></div>
            </div>
            <div class="sectime-2">
                <div>
                    <span id="nextsec">20:00</span>点场
                </div>
                <div>
                    <span>即将开始</span>
                </div>
            </div>
            <div class="sectime-3" style="background-color: blue">
            </div>
        </div>
    </div>
    <div class="section section-margin">

        <div class="container">
            <div class="row flex-row-reverse">
                <div class="row shop_wrapper grid_3 ">
                    <div style="text-align: center" th:each="secitem : ${secList}" th:if="${secitem.product!=null}"
                         id="productDetail"
                         class="col-lg-3 col-md-3 col-sm-6 product">
                        <div class="product-inner">
                            <div class="thumb">
                                <a th:href="@{'ywt-product?id='+${secitem.product.id}}" class="image">
                                    <img style="height: 240px;width:220px" class="first-image"
                                         th:src="${secitem.product.pic}"
                                         alt="Product"/>
                                </a>
                            </div>
                            <div class="content">
                                <h5 class="title" style="
                                white-space:nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis">
                                    <a style="
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis"
                                       th:href="@{'ywt-product?id='+${secitem.product.id}}"
                                       th:text="${secitem.product.name}"></a>
                                </h5>
                                <div class="price">
                                    <del class="new" style="color: red;font-size: 14px"
                                         th:text="'¥'+${secitem.product.price}"></del>
                                    &emsp;
                                    <span class="new" th:text="'¥'+${secitem.product.promotionPrice}"></span>
                                </div>
                                <div>
                                    <button class="btn" style="color: white;background-color: red">立即抢购</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Shop Wrapper End -->
            </div>
        </div>
    </div>
    <script src="../static/assets/js/jquery-3.6.1.js"></script>
    <script src="assets/js/jquery-3.6.1.js"></script>
    <script>
        let sec = true, secTime = [], cursec = 0;
        $(function () {

            $.ajax({
                url: "secTime",
                type: "get",
                success: function (data) {
                    for (let i = 0; i < data.length; i++) {
                        secTime.push(data[i])

                    }
                }
            })

        })
        setInterval(function () {
            if (secTime.length <= 0) {
                return;
            }
            let time = new Date()
            let h = time.getHours()
            // let h = 18
            let m = time.getMinutes()
            let s = time.getSeconds()
            if (secTime.length > 0) {
                let i = 0
                for (i = secTime.length - 1; i >= 0; i--) {
                    let startTime = parseInt(secTime[i].startTime.split(":")[0])
                    let endTime = parseInt(secTime[i].endTime.split(":")[0])
                    if (startTime <= h && h < endTime) {
                        cursec = i
                        $("#cursec").text(secTime[i].name)
                        $("#nextsec").text(secTime[i + 1].name)
                        $("#secover").text("正在秒杀");
                        break;
                    }
                    if (i - 1 >= 0) {
                        let preEndTime = parseInt(secTime[i - 1].endTime.split(":")[0])
                        if (h >= preEndTime && h < startTime) {
                            $("#cursec").text(secTime[i - 1].name)
                            $("#nextsec").text(secTime[i].name)
                            $("#secover").text("已结束");
                        }
                    }
                }
                if (i < 0) {
                    sec = false;
                } else {
                    sec = true;
                }
            }
            let oh = parseInt(secTime[cursec].endTime.split(":")[0])
            if (sec === true) {
                h = oh - 1 - h
                m = 60 - 1 - m
                s = 60 - 1 - s
                $("#csech").text(h < 10 ? "0" + h : h)
                $("#csecm").text(m < 10 ? "0" + m : m)
                $("#csecs").text(s < 10 ? "0" + s : s)
            }
        }, 1000)
    </script>


    <!-- Shop Section End -->


    <!-- Scripts -->
    <!-- Global Vendor, plugins JS -->

    <!-- Vendor JS -->

    <!--
    <script src="assets/js/vendor/popper.min.js"></script>
    <script src="assets/js/vendor/bootstrap.min.js"></script>
    <script src="assets/js/vendor/jquery-3.5.1.min.js"></script>
    <script src="assets/js/vendor/jquery-migrate-3.3.0.min.js"></script>
    <script src="assets/js/vendor/modernizr-3.11.2.min.js"></script>
    -->


    <!-- Plugins JS -->

    <!--
    <script src="assets/js/plugins/aos.min.js"></script>
    <script src="assets/js/plugins/jquery.ajaxchimp.min.js"></script>
    <script src="assets/js/plugins/jquery-ui.min.js"></script>
    <script src="assets/js/plugins/nice-select.min.js"></script>
    <script src="assets/js/plugins/swiper-bundle.min.js"></script>
    <script src="assets/js/plugins/countdown.min.js"></script>
    <script src="assets/js/plugins/lightgallery-all.min.js"></script>
    -->


    <!-- Use the minified version files listed below for better performance and remove the files listed above -->


    <script src="assets/js/vendor.min.js"></script>
    <script src="assets/js/plugins.min.js"></script>

    <!--Main JS-->
    <script src="assets/js/main.js"></script>
</div>
</body>

</html>